<template>
  <div 
    class="circle-component"
    :style="circleStyles"
  />
</template>

<script>
import { defineProps, computed } from 'vue';

export default {
  name: 'CircleComponent',
  props: {
    component: {
      type: Object,
      required: true,
      description: '圆形组件配置'
    },
    isPreview: {
      type: Boolean,
      default: false,
      description: '是否预览模式'
    }
  },
  setup(props) {
    // 圆形样式
    const circleStyles = computed(() => ({
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      backgroundColor: props.component.backgroundColor || '#67c23a',
      border: props.component.borderWidth ? `${props.component.borderWidth}px solid ${props.component.borderColor || '#333333'}` : 'none',
      boxShadow: props.component.boxShadow || 'none',
      opacity: props.component.opacity !== undefined ? props.component.opacity : 1,
      // 支持渐变背景
      background: props.component.backgroundGradient ? 
        `radial-gradient(${props.component.gradientColor1 || '#67c23a'}, ${props.component.gradientColor2 || '#409eff'})` : 
        'none'
    }));
    
    return {
      circleStyles
    };
  }
};
</script>

<style scoped>
.circle-component {
  box-sizing: border-box;
}
</style>
    